<template>
  <div class="container">
    <nav-bar title="详情" />
    <div class="discrib">
      <div class="detail">
        <div class="name">{{article.title}}</div>
        <div class="time">
          <em>{{article.categoryName}}</em>
          <span>{{article.addDate}}</span>
          <!-- <i>删除</i> -->
        </div>
        <!-- <div class="main-img">
          <img :src='article.iconurl' />
        </div> -->
        <div class="discription news-discription" v-html="article.content"></div>
        <!-- <div class="recommend">
          <img src='../../assets/img/product-1.jpg' />
          <div class="name-price">
            <div class="reco-name">瑜伽服V领网纱蕾丝</div>
            <div class="price">
              <em>¥288.0</em>
              <i>¥498.0</i>
            </div>
          </div>
        </div> -->
      </div>
      <div class="icons">
        <div class="icon" @click="like(article.id)">
          <img src='../../assets/img/good.png' v-if="!article.IsZan" />
          <img src='../../assets/img/good-on.png' v-else />
        </div>
        <!-- <div class="icon">
          <img src='../../assets/img/comment.png' />
        </div> -->
        <div class="icon" @click="collect(article.id)">
          <img src='../../assets/img/star.png' v-if="!article.IsFavorite" />
          <img src='../../assets/img/star-on.png' v-else />
        </div>
        <div class="icon" id="copyBtn">
          <img src='../../assets/img/share.png' />
        </div>
      </div>
      <div class="dis">
        <div class="like-comment-share">
          <span>赞 {{article.ZanCounts}}</span>
          <span class="cur">评论 {{commentList.length}}</span>
          <span>分享 0</span>
        </div>
        <div class="comment">
          <div class="title">
            <div class="amount">{{commentList.length}}条评价</div>
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in commentList" :key="index">
              <!-- <em class="delete">删除</em> -->
              <h4>{{item.MemberName}}:</h4>
              <p>{{item.Description}}</p>
              <!-- <div class="prompt">
                <span>WILIEN: 本馆定于元旦休假，1月1日10点-20点～</span>
              </div> -->
              <div class="time">{{item.AddDate}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="send">
        <input type="text" v-model="comment" />
        <button @click="commentSubmit">发布</button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { 
  getArticleComment,
  insertArticleComment,
  likeArticle,
} from '../../network/brand'
import { getBrandDetail, collectBrandArticle } from '../../network/brand'
import { Toast } from 'vant'
import { format } from 'date-fns'
import { sharePage } from '../../utils/wx'
import { isEmoji, filterEmoji } from '../../utils'
import { copyInit, getShareUrl } from '../../utils/share'

export default {
  name: 'NewsDetail',
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      article: {
        title: '',
        addDate: '',
        content: '',
        IsFavorite: false,
        IsZan: false,
      },
      comment: '',
      commentList: [],
    }
  },
  async mounted() {
    await this.getBrandDetail()
    this.getArticleComment()
    this.sharePage()
    copyInit('news')
  },
  methods: {
    async sharePage(){
      sharePage({
        title: this.article.title,
        desc: '好友给你推荐了' + this.article.title,
        link: await getShareUrl('news'),
      })
    },
    like(id){
      let requestData = {
        userkey: this.userKey,
        ArticleId: id
      }
      likeArticle(requestData, async msg => {
        Toast(msg)
        await this.getBrandDetail()
      })
    },
    collect(id){
      let requestData = {
        userkey: this.userKey,
        articleId: id
      }
      collectBrandArticle(requestData, async msg => {
        Toast(msg)
        await this.getBrandDetail()
      })
    },
    getBrandDetail(){
      return new Promise((resolve, reject) => {
        let id = this.$route.query.id
        let requestData = {
          id,
          userkey: this.userKey,
        }
        getBrandDetail(requestData, article => {
          this.article = article
          resolve()
        })
      })
    },
    getArticleComment(){
      let requestData = {
        userkey: this.userKey,
        articleId: this.$route.query.id
      }
      getArticleComment(requestData, list => {
        list.filter(item => {
          item.AddDate = format(new Date(item.AddDate),'yyyy-MM-dd HH:mm:ss')
        })
        this.commentList = list
      })
    },
    commentSubmit(){
      let requestData = {
        userkey: this.userKey,
        Text: this.comment,
        ArticleId: this.$route.query.id,
        ParentId: 0, // 一级评论传0, 二级评论传一级的id
      }
      if(this.comment === ''){
        Toast('评论内容不能为空')
        return false
      }
      // 检测是否表情符号
      let emojiFlag = isEmoji(this.comment)
      if(emojiFlag){
        Toast('不支持表情符号')
        setTimeout(() => {
          this.comment = filterEmoji(this.comment)
        }, 2000)
        return false
      }
      insertArticleComment(requestData, () => {
        Toast('评论成功')
        this.comment = ''
        this.getArticleComment()
      })
    },
  },
}
</script>

<style scoped>
.main-img img{
  width: 100%;
  padding: 15px 0;
}
.discrib{
  color: #555555;
  font-size: 14px;
}
.discrib .detail{
  background: #fff;
  padding: 20px 25px;
}
.discrib .detail .time{
  padding-top: 5px;
  color: #999999;
}
.discrib .detail .time em{
  margin-right: 10px;
}
.discrib .detail .time i{
  margin-left: 20px;
}
.discrib .detail .name{
  color: #000000;
  font-size: 16px;
  padding-bottom: 10px;
}
.discrib .detail .discription{
  padding-top: 15px;
  line-height: 1.8;
}
.discrib .detail .recommend{
  display: flex;
  align-items: center;
  padding-top: 15px;
}
.discrib .detail .recommend .price em{
  font-size: 16px;
  color: #d50721;
  padding-right: 10px;
}
.discrib .detail .recommend .reco-name{
  line-height: 1.2;
  padding-bottom: 10px;
}
.discrib .detail .recommend img{
  width: 80px;
  margin-right: 15px;
}
.discrib .detail .recommend 
.like-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.icons{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  margin-top: 10px;
  background-color: #fff;
}
.icon{
  width: 16px;
  height: 16px;
  padding: 20px;
}
.icon img{
  width: 100%;
}
.dis{
  padding: 15px 25px 65px 25px;
  margin-top: 10px;
  font-size: 12px;
  background-color: #fff;
}
.user-say{
  background-color: #fff;
  margin-top: 10px;
  padding: 20px 25px;
}
.user-say .name-time{
  display: flex;
  align-items: center;
  height: 40px;
}
.user-say .name-time img{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 15px;
}
.user-say .name-time .name h3{
  font-size: 14px;
}
.user-say .name-time .name em{
  color: #999;
  font-size: 14px;
}
.say{
  font-size: 14px;
  padding-top: 10px;
}
.like-comment-share{
  height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.like-comment-share .cur{
  color: #d50721;
}
.comment{
  padding-top: 10px;
  margin-top: 0;
  border-top: 1px solid #e6e6e6;
}
.comment .title{
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}
.comment .title{
  position: relative;
  padding-right: 15px;
  padding-bottom: 15px;
}
.comment .list .item{
  position: relative;
  font-size: 14px;
  padding: 5px 0;
  line-height: 1.8;
  border-bottom: 1px solid #e4e4e4;
}
.comment .list .item em.delete{
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 5px 0 10px;
  line-height: 40px;
  z-index: 9;
}
.comment .list .item p{
  color: #757575;
}
.comment .list .item .prompt{
  background-color: #f4f4f4;
  border-radius: 3px;
  padding: 3px 8px;
  color: #333;
}
.comment .list .item .time{
  color: #ccc;
  padding-top: 10px;
  font-size: 12px;
}
.send{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  z-index: 999;
  background-color: #e7e7e7;
}
.send input{
  flex-grow: 1;
  background: none;
  text-indent: 15px;
}
.send button{
  width: 100px;
  color: #ffffff;
  background-color: #000000;
}
</style>

<style>
.news-discription img{
  width: 100%;
}
</style>